import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text,Input,Picker } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import Hearder from './hearder'
import '../card/card.scss'

export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
    	isload:1,
    	list:'',
    	arrlist:[],
    	typeindex:0,
    	account:'',
    	branch:'',
    	realname:'',
    	type:'',
    	appmark:CommonJs.getmark(),
    }
  }
  config = {
    navigationBarTitleText:'新增银行卡'
  }
  open(url,type){
    CommonJs.openTo(url)
  }
  componentWillMount () {
  	var type=this.$router.params.type
  	this.setState({
      type:type
    });
    this.getdate()
  }
  componentDidShow () {

  }
 
 	getdate(){
 		var url='/pay/papi/v1.9/bank-type'
 		var _this=this;
 		CommonJs.ajaxRequest(url,'','GET',function(res){
 			var arr=[]
  		var list=res.data;
	  	for(var i=0;i<list.length;i++){
	  		arr.push(list[i].name)
	  	}
 			_this.setState({
	      list:res.data,
	      arrlist:arr
	    })
 		},'wfw')
 	}
  change(e){
  	var index=e.detail.value;
  	this.setState({
			typeindex:index
		})
  }
  handleChange(name,e){
    var _this = this
      let value=e.target.value;
      this.setState({
      [name]: value
    });
  }
  sure(code){
  	var url='/pay/papi/v1.9/bank';
  	var _this=this;
  	var dates={
		  "account":this.state.account,
		  "bankPaytype": "BANKPAYTYPE_BANK",
		  "bankType":this.state.list[this.state.typeindex],
		  "bankTypeId": this.state.list[this.state.typeindex].id,
		  "branch": this.state.branch,
		  "isFirst": "FIRSTSET_YES",
		  "realname":this.state.realname
		}
  	CommonJs.ajaxRequest(url,dates,'POST',function(res){
	     Taro.showToast({
					title:'新增成功',
					icon: 'none',
					duration: 2000
				});
				var type=_this.state.type;
				var curl='/pages/my/bank';
				if(type){
					curl=curl+'?type='+type
				}
	      setTimeout(function(){
	      	 CommonJs.open(curl)
	      },1000)
	  },'wfw')
  }

  render () {
		const list=this.state.list
    return (
      <View className='page'>
      	<View className='pwd-set'>
          <View className='pwd-list'>
          	<View className='pwd-list'>
                <View className='pwd-li'>
                <Input type='text' placeholder='请输入银行账户' focus onInput={this.handleChange.bind(this,'account')}/>
                </View>
            </View>
            <View className='pwd-li'>
                <Input type='text' placeholder='选择卡类型' value={list&&list[this.state.typeindex].name} />
                </View>
                <View className='pwd-lis'>
                  <Picker mode='selector'  range={this.state.arrlist}  onChange={this.change.bind(this)}><Text className='pwd-text'>选择卡类型</Text></Picker> 
                </View>
                
            </View>
            <View className='pwd-list'>
                <View className='pwd-li'>
                <Input type='text' placeholder='请输入支行名称' focus onInput={this.handleChange.bind(this,'branch')}/>
                </View>
            </View>
            <View className='pwd-list'>
                <View className='pwd-li'>
                <Input type='text' placeholder='请输入真实姓名' focus onInput={this.handleChange.bind(this,'realname')}/>
                </View>
            </View>
            <View className='zr-btn'>
        			<View className='zr-sure' onClick={this.sure.bind(this)}>确定</View>
        		</View>
          </View>
      </View>
    )
  }
}
